<template>
  <div class="tabbar">
    <div class="dh">
      <span
        :style="{ color: currentIndex == index ? 'blue' : '' }"
        v-for="(item, index) in dhArr"
        :key="index"
        @click="click(index)"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      dhArr: ["首页", "订单", "我的"],
    };
  },
  methods: {
    click(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style>
.tabbar {
  width: 100%;
  height: 40px;
  /* border-top: 1px solid #555; */
  position: fixed;
  bottom: 0;
  background: skyblue;
}
.tabbar .dh {
  display: flex;
  justify-content: space-around;
  line-height: 40px;
}
</style>